import React from 'react';
import { Button, Select, Form, Input } from 'antd';

interface DataItem {
  name: string;
  phone: string;
  status: string | number;
}
interface TableFormPropsInter {
  onFinish: (data: DataItem) => void;
  onReset: (data: DataItem) => void;
  onValuesChange: (data: DataItem) => void;
}
const TableForm: React.FC<TableFormPropsInter> = (props) => {
  const defaultData = { name: '', phone: '', status: '' };
  const onFinish = (values: any) => {
    console.log('Success:', values);
    props.onFinish(values);
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  const onReset = () => {
    props.onReset(defaultData);
  };

  const onValuesChange = (value: any, values: DataItem) => {
    props.onValuesChange(values);
  };

  const selectOptions = [
    { value: '', label: '全部' },
    { value: 0, label: '禁用' },
    { value: 1, label: '启用' },
  ];

  return (
    <Form
      name="basic"
      labelCol={{ span: 6 }}
      wrapperCol={{ span: 16 }}
      layout="inline"
      initialValues={defaultData}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
      onReset={onReset}
      onValuesChange={onValuesChange}
      className="my-form-wrapper"
    >
      <Form.Item label="人员姓名" name="name">
        <Input />
      </Form.Item>

      <Form.Item label="手机号" name="phone">
        <Input />
      </Form.Item>

      <Form.Item label="状态" name="status">
        <Select options={selectOptions} />
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit">
          查询
        </Button>
        <Button type="default" htmlType="reset">
          重置
        </Button>
      </Form.Item>
    </Form>
  );
};

export default TableForm;
